<template>
    <div class="share-card-container" ref="shareContainer">
        <!-- 分享按钮 -->
        <!-- <el-tooltip content="分享" placement="bottom"> -->
        <div class="share-button" @click.stop="toggleShareOptions">
            <i class="el-icon-share"></i>
        </div>
        <!-- 分享选项浮层 -->
        <transition name="fade">
            <div v-if="shareOptionsVisible" class="share-options-popover">
                <div class="share-options">
                    <div class="share-option" @click="generateShareCard">
                        <i class="el-icon-picture-outline"></i>
                        <span>生成分享卡片</span>
                    </div>
                    <div class="share-option" @click="copyShareLink">
                        <i class="el-icon-link"></i>
                        <span>复制链接</span>
                    </div>
                    <div class="share-option" @click="shareToWeibo">
                        <i class="fab fa-weibo"></i>
                        <span>分享到微博</span>
                    </div>
                    <div class="share-option" @click="shareToQQ">
                        <i class="fab fa-qq"></i>
                        <span>分享到QQ</span>
                    </div>
                </div>
            </div>
        </transition>

        <!-- 分享卡片预览弹窗 -->
        <el-dialog title="分享卡片" :visible.sync="cardDialogVisible" width="550px" custom-class="card-dialog"
            modal-class="share-card-modal" :append-to-body="true">
            <div class="card-preview-container">
                <!-- 分享卡片内容 -->
                <div ref="shareCardRef" class="share-card">
                    <div class="card-header">
                        <img :src="logo" alt="网站Logo" class="card-logo" ref="logoImg" />
                        <div class="card-site-name">{{ siteName }}</div>
                    </div>
                    <div class="card-author-info">
                        <img :src="avatar" alt="用户头像" class="card-avatar" />
                        <div class="author-details">
                            <div class="author-name">{{ nickname }}</div>
                            <!-- 发布时间和更新时间显示 -->
                            <div class="time-info">
                                <div class="post-time">
                                    <i class="el-icon-time"></i>
                                    <span>{{ formatTime(createTime) }}</span>
                                </div>
                                <div class="update-time" v-if="showUpdateTime">
                                    <i class="el-icon-refresh"></i>
                                    <span>更新于 {{ formatTime(updateTime) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-content">
                        <!-- 使用与博客相同的样式渲染内容 -->
                        <div class="card-text content-render" v-html="renderedContent"></div>
                        <div class="card-images" v-if="images && images.length > 0">
                            <div v-for="(img, index) in displayImages" :key="index" class="card-image-container">
                                <img :src="img" alt="内容图片" class="card-image" />
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="card-meta">
                            <div class="meta-item share-time">
                                <i class="el-icon-share"></i>
                                <span>分享于 {{ currentTime }}</span>
                            </div>
                            <div class="meta-item">
                                <i class="el-icon-view"></i>
                                <span>扫描二维码查看全文</span>
                            </div>
                        </div>
                        <div ref="qrcodeContainer" class="card-qrcode"></div>
                    </div>
                </div>

                <!-- 卡片操作按钮 -->
                <div class="card-actions">
                    <el-button type="primary" @click="downloadCard">保存图片</el-button>
                    <el-button @click="cardDialogVisible = false">关闭</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
import { formatCombinedTime } from '@/utils/time' // 导入与主站相同的时间格式化函数

export default {
    name: 'ShareCard',
    props: {
        content: {
            type: String,
            required: true
        },
        images: {
            type: Array,
            default: () => []
        },
        nickname: {
            type: String,
            default: '用户'
        },
        avatar: {
            type: String,
            default: ''
        },
        momentId: {
            type: [String, Number],
            required: true
        },
        createTime: {
            type: String,
            default: ''
        },
        updateTime: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            shareOptionsVisible: false, // 控制分享选项的显示
            cardDialogVisible: false,
            siteName: 'KingCola-ICG Blog',
            logo: '',
            currentTime: new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            }),
            // 水印配置
            watermarkConfig: {
                size: 140,         // 水印大小 - 增大以容纳完整文本
                gap: 150,          // 水印间距
                opacity: 0.1,     // 水印透明度 - 提高透明度使其更清晰
                angle: -30,        // 水印旋转角度
                color: '#1e40af'   // 水印颜色 - 使用更深的蓝色
            }
        }
    },
    created() {
        // 动态获取logo路径，防止硬编码导致的路径错误
        try {
            this.logo = 'https://pic.kingcola-icg.cn/file/1749797597269_favicon.ico'
        } catch (e) {
            // 如果无法获取logo，使用备用图标
            this.logo = this.getBackupLogo()
        }

        // 图片预加载
        this.preloadLogo()
    },
    computed: {
        shareUrl() {
            // 生成当前说说的完整URL
            const baseUrl = window.location.origin
            return `${baseUrl}/moments?id=${this.momentId}`
        },
        formattedContent() {
            // 格式化内容，移除HTML标签，用于分享链接描述
            let text = this.content.replace(/<[^>]+>/g, '')
            if (text.length > 100) {
                text = text.substring(0, 100) + '...'
            }
            return text
        },
        // 完整渲染的内容，保留格式和样式
        renderedContent() {
            return this.renderMomentContent(this.content)
        },
        // 用于显示的图片数组，最多显示6张
        displayImages() {
            return Array.isArray(this.images) ? this.images.slice(0, 6) : []
        },
        // 判断是否显示更新时间
        showUpdateTime() {
            return this.updateTime && this.updateTime !== this.createTime
        }
    },
    watch: {
        shareOptionsVisible(newValue) {
            if (newValue) {
                document.addEventListener('click', this.closeShareOptions);
            } else {
                document.removeEventListener('click', this.closeShareOptions);
            }
        }
    },
    beforeDestroy() {
        // 组件销毁前移除事件监听
        document.removeEventListener('click', this.closeShareOptions);
    },
    methods: {
        formatTime(time) {
            if (!time) return '';
            // 使用与主站相同的格式化函数，但确保不换行
            const formattedTime = formatCombinedTime(time);
            // 添加不换行空格
            return formattedTime.replace(/ /g, '\u00A0');
        },

        // 完善内容渲染函数
        renderMomentContent(content) {
            if (!content) return '';

            try {
                // 处理代码块，确保它们能够完整显示
                content = this.processCodeBlocks(content);

                // 确保内容能完整显示
                return content;
            } catch (error) {
                console.error('渲染内容失败:', error);
                return content;
            }
        },

        // 处理代码块
        processCodeBlocks(content) {
            // 确保代码块样式与主站一致
            return content.replace(/<pre[^>]*>([\s\S]*?)<\/pre>/gi, (match) => {
                // 保留代码块的样式，确保高亮
                return match;
            });
        },

        toggleShareOptions() {
            this.shareOptionsVisible = !this.shareOptionsVisible;
        },

        closeShareOptions(event) {
            if (this.$refs.shareContainer && !this.$refs.shareContainer.contains(event.target)) {
                this.shareOptionsVisible = false;
            }
        },

        showShareOptions() {
            this.shareOptionsVisible = true;
        },

        async generateShareCard() {
            this.shareOptionsVisible = false; // 点击后关闭选项
            this.cardDialogVisible = true;

            // 更新当前时间
            this.currentTime = new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });

            // 等待DOM更新后生成二维码
            this.$nextTick(async () => {
                try {
                    await this.generateQRCode();
                } catch (error) {
                    console.error('生成二维码失败:', error);
                }
            });
        },
        async generateQRCode() {
            try {
                // 确保容器元素存在
                if (!this.$refs.qrcodeContainer) {
                    console.error('二维码容器元素不存在')
                    return
                }

                // 清空容器
                while (this.$refs.qrcodeContainer.firstChild) {
                    this.$refs.qrcodeContainer.removeChild(this.$refs.qrcodeContainer.firstChild)
                }

                // 使用qrcode库生成二维码图片而不是Canvas
                const qrCodeDataUrl = await QRCode.toDataURL(this.shareUrl, {
                    width: 120,
                    margin: 1,
                    color: {
                        dark: '#000000',
                        light: '#ffffff'
                    },
                    errorCorrectionLevel: 'H' // 高容错率
                })

                // 创建图片元素
                const img = new Image()
                img.src = qrCodeDataUrl
                img.style.width = '100%'
                img.style.height = '100%'

                // 添加到容器
                this.$refs.qrcodeContainer.appendChild(img)
            } catch (err) {
                console.error('生成二维码失败:', err)

                // 尝试备用方法
                try {
                    // 使用QRCode.js的toCanvas方法作为备用
                    const canvas = document.createElement('canvas')
                    QRCode.toCanvas(canvas, this.shareUrl, {
                        width: 120,
                        margin: 1
                    })
                    this.$refs.qrcodeContainer.appendChild(canvas)
                } catch (backupErr) {
                    console.error('备用二维码生成也失败:', backupErr)

                    // 如果都失败，显示一个占位符
                    const placeholder = document.createElement('div')
                    placeholder.textContent = '扫码查看'
                    placeholder.style.display = 'flex'
                    placeholder.style.alignItems = 'center'
                    placeholder.style.justifyContent = 'center'
                    placeholder.style.width = '100%'
                    placeholder.style.height = '100%'
                    placeholder.style.border = '1px dashed #ccc'
                    placeholder.style.borderRadius = '4px'
                    placeholder.style.fontSize = '12px'
                    placeholder.style.color = '#666'

                    this.$refs.qrcodeContainer.appendChild(placeholder)
                    this.$message.warning('二维码生成失败，请尝试复制链接分享')
                }
            }
        },
        async downloadCard() {
            let loadingInstance = null;
            try {
                loadingInstance = this.$loading({
                    lock: true,
                    text: '正在生成分享卡片...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })

                // 确保内容完全渲染，处理可能的图片加载
                await this.waitForImagesLoaded()

                // 添加装饰效果用于下载，这些效果只在生成图片前添加
                this.addCardDecorationsForExport()

                // 使用html2canvas将卡片转换为图片
                const canvas = await html2canvas(this.$refs.shareCardRef, {
                    useCORS: true,
                    allowTaint: false,
                    scale: 2, // 提高清晰度
                    backgroundColor: '#ffffff',
                    logging: false,
                    // 处理跨域图片
                    onclone: (documentClone) => {
                        // 找到克隆后的元素
                        const clonedCard = documentClone.querySelector('.share-card')
                        if (clonedCard) {
                            // 将内联样式应用到克隆卡片，确保样式一致
                            this.applyInlineStyles(clonedCard)

                            // 确保水印容器样式正确
                            const watermarkContainer = clonedCard.querySelector('.card-watermark-container')
                            if (watermarkContainer) {
                                watermarkContainer.style.position = 'absolute'
                                watermarkContainer.style.top = '0'
                                watermarkContainer.style.left = '0'
                                watermarkContainer.style.width = '100%'
                                watermarkContainer.style.height = '100%'
                                watermarkContainer.style.overflow = 'hidden'
                                watermarkContainer.style.pointerEvents = 'none'
                                watermarkContainer.style.zIndex = '10'

                                // 确保所有水印元素样式正确
                                const watermarks = watermarkContainer.querySelectorAll('.card-watermark')
                                watermarks.forEach(watermark => {
                                    // 确保水印元素的内联样式
                                    const styles = getComputedStyle(watermark)
                                    for (const prop of ['position', 'top', 'left', 'width', 'height', 'opacity', 'transform']) {
                                        watermark.style[prop] = styles[prop]
                                    }
                                })
                            }

                            // 优化图片渲染
                            const images = clonedCard.querySelectorAll('img')
                            images.forEach(img => {
                                // 确保图片能正确显示
                                if (!img.complete || img.naturalHeight === 0) {
                                    img.crossOrigin = 'anonymous'

                                    // 对于logo特殊处理
                                    if (img.classList.contains('card-logo')) {
                                        const logoBackup = this.getBackupLogo()
                                        if (logoBackup) {
                                            img.src = logoBackup
                                        }
                                    } else {
                                        img.src = this.getPlaceholderImage()
                                    }
                                }
                            })

                            // 优化代码块渲染，确保完整显示
                            const pres = clonedCard.querySelectorAll('pre')
                            pres.forEach(pre => {
                                pre.style.whiteSpace = 'pre-wrap'
                                pre.style.maxHeight = 'none'
                                pre.style.overflow = 'visible'
                            })

                            // 确保装饰角样式正确
                            const corners = clonedCard.querySelectorAll('.card-corner')
                            corners.forEach(corner => {
                                const styles = getComputedStyle(corner)
                                for (const prop of ['position', 'width', 'height', 'top', 'right', 'bottom', 'left', 'border']) {
                                    corner.style[prop] = styles[prop]
                                }
                                corner.style.zIndex = '20'
                            })
                        }
                    }
                })

                // 转换为图片并下载
                const imgData = canvas.toDataURL('image/png')
                const link = document.createElement('a')
                link.href = imgData
                link.download = `${this.siteName}-分享卡片-${this.getCurrentDate()}-${new Date().getTime()}.png`
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)

                // 移除为下载添加的装饰效果
                this.removeCardDecorationsAfterExport()

                loadingInstance.close()
                this.$message.success('分享卡片已保存')
            } catch (error) {
                console.error('保存分享卡片失败:', error)
                this.$message.error('保存分享卡片失败')

                try {
                    // 移除为下载添加的装饰效果
                    this.removeCardDecorationsAfterExport()
                    loadingInstance && loadingInstance.close()
                } catch (e) { }
            }
        },

        // 为导出添加装饰效果
        addCardDecorationsForExport() {
            if (!this.$refs.shareCardRef) return

            // 创建全页面水印
            this.createFullPageWatermark()

            // 添加装饰角
            const cornerTopLeft = document.createElement('div')
            cornerTopLeft.className = 'card-corner corner-top-left'
            const cornerTopRight = document.createElement('div')
            cornerTopRight.className = 'card-corner corner-top-right'
            const cornerBottomLeft = document.createElement('div')
            cornerBottomLeft.className = 'card-corner corner-bottom-left'
            const cornerBottomRight = document.createElement('div')
            cornerBottomRight.className = 'card-corner corner-bottom-right'

            // 添加装饰元素
            this.$refs.shareCardRef.appendChild(cornerTopLeft)
            this.$refs.shareCardRef.appendChild(cornerTopRight)
            this.$refs.shareCardRef.appendChild(cornerBottomLeft)
            this.$refs.shareCardRef.appendChild(cornerBottomRight)

            // 添加光影效果
            this.$refs.shareCardRef.classList.add('with-export-effects')
        },

        // 创建全页面水印
        createFullPageWatermark() {
            if (!this.$refs.shareCardRef) return

            // 创建水印容器
            const watermarkContainer = document.createElement('div')
            watermarkContainer.className = 'card-watermark-container'

            // 获取卡片尺寸
            const cardWidth = this.$refs.shareCardRef.offsetWidth
            const cardHeight = this.$refs.shareCardRef.offsetHeight

            // 自适应水印大小和间距
            const { size, gap, opacity, angle, color } = this.getAdaptiveWatermarkConfig(cardWidth, cardHeight)

            // 计算需要创建的水印数量
            const cols = Math.ceil(cardWidth / gap) + 1
            const rows = Math.ceil(cardHeight / gap) + 1

            // 创建水印网格
            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    const watermarkEl = document.createElement('div')
                    watermarkEl.className = 'card-watermark'
                    watermarkEl.style.position = 'absolute'
                    watermarkEl.style.top = `${row * gap}px`
                    watermarkEl.style.left = `${col * gap}px`
                    watermarkEl.style.width = `${size}px`
                    watermarkEl.style.height = `${size}px`
                    watermarkEl.style.opacity = `${opacity}`
                    watermarkEl.style.transform = `rotate(${angle}deg)`
                    watermarkEl.style.pointerEvents = 'none'
                    watermarkEl.style.zIndex = '999'

                    // 创建SVG水印
                    const svgContent = this.createWatermarkSVG(size, color)
                    watermarkEl.innerHTML = svgContent

                    watermarkContainer.appendChild(watermarkEl)
                }
            }

            // 将水印容器添加到卡片中
            this.$refs.shareCardRef.appendChild(watermarkContainer)
        },

        // 创建水印SVG内容
        createWatermarkSVG(size, color) {
            // 计算字体大小 - 调整字体大小以确保文本完整显示
            const titleFontSize = Math.max(8, Math.round(size / 10)) // 减小字体以确保完整显示
            const dateFontSize = Math.max(7, Math.round(size / 12))

            // 计算文本位置
            const titleY = Math.round(size / 2.2)
            const dateY = titleY + Math.round(size / 5)
            const centerX = size / 2

            // 处理站点名称，确保它能完整显示
            const siteName = this.siteName

            // 创建SVG - 增加描边效果使文字更清晰，并确保文本区域足够宽
            return `
                <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                            <feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="#000000" flood-opacity="0.5" />
                        </filter>
                    </defs>
                    <path d="${this.createCirclePath(centerX, centerX, size * 0.8)}" fill="${color}"></path>
                    
                    <!-- 站点名称文本，使用textLength确保文本完整显示 -->
                    <text x="${centerX}" y="${titleY}" 
                          font-family="Arial" 
                          font-size="${titleFontSize}" 
                          font-weight="bold" 
                          text-anchor="middle" 
                          fill="#ffffff" 
                          filter="url(#shadow)"
                          textLength="${size * 0.9}"
                          lengthAdjust="spacingAndGlyphs">${siteName}</text>
                    
                    <!-- 日期文本 -->
                    <text x="${centerX}" y="${dateY}" 
                          font-family="Arial" 
                          font-size="${dateFontSize}" 
                          font-weight="normal" 
                          text-anchor="middle" 
                          fill="#ffffff" 
                          filter="url(#shadow)">${this.getCurrentDate()}</text>
                </svg>
            `
        },

        // 创建圆形SVG路径
        createCirclePath(cx, cy, r) {
            // 简化的圆形路径
            return `M${cx},${cy - r} a${r},${r} 0 1,0 0,${2 * r} a${r},${r} 0 1,0 0,-${2 * r}`
        },

        // 获取自适应水印配置
        getAdaptiveWatermarkConfig(cardWidth, cardHeight) {
            const config = { ...this.watermarkConfig }

            // 根据卡片大小调整水印大小
            if (cardWidth < 400) {
                // 小卡片
                config.size = 120  // 增大尺寸以容纳完整文本
                config.gap = 130
                config.opacity = 0.09  // 提高透明度
            } else if (cardWidth >= 400 && cardWidth < 600) {
                // 中等卡片
                config.size = 140  // 增大尺寸以容纳完整文本
                config.gap = 150
                config.opacity = 0.08  // 提高透明度
            } else {
                // 大卡片
                config.size = 160  // 增大尺寸以容纳完整文本
                config.gap = 170
                config.opacity = 0.07  // 提高透明度
            }

            // 确保暗色模式下水印更清晰
            if (this.isDarkMode()) {
                config.color = '#4f46e5'  // 在暗色模式下使用更亮的蓝色
                config.opacity += 0.02    // 在暗色模式下略微提高透明度
            }

            return config
        },

        // 检测是否为暗色模式
        isDarkMode() {
            // 检查是否有暗色模式类
            if (document.body.classList.contains('dark-mode')) {
                return true
            }

            // 检查系统偏好
            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                return true
            }

            return false
        },

        // 获取当前日期格式化字符串
        getCurrentDate() {
            const date = new Date()
            return date.getFullYear() + '-' +
                String(date.getMonth() + 1).padStart(2, '0') + '-' +
                String(date.getDate()).padStart(2, '0')
        },

        // 移除导出装饰效果
        removeCardDecorationsAfterExport() {
            if (!this.$refs.shareCardRef) return

            // 移除临时添加的装饰
            const watermarkContainer = this.$refs.shareCardRef.querySelector('.card-watermark-container')
            if (watermarkContainer) watermarkContainer.remove()

            // 移除角落装饰
            const corners = this.$refs.shareCardRef.querySelectorAll('.card-corner')
            corners.forEach(corner => corner.remove())

            // 移除光影效果类
            this.$refs.shareCardRef.classList.remove('with-export-effects')
        },

        // 应用内联样式以确保下载时样式一致
        applyInlineStyles(element) {
            const allElements = element.querySelectorAll('*')
            allElements.forEach(el => {
                const computedStyle = getComputedStyle(el)

                // 应用计算后的样式作为内联样式
                for (const prop of ['color', 'background-color', 'font-size', 'font-family',
                    'padding', 'margin', 'border', 'border-radius', 'box-shadow']) {
                    if (computedStyle[prop]) {
                        el.style[prop] = computedStyle[prop]
                    }
                }

                // 确保特定元素的样式一致
                if (el.tagName === 'PRE') {
                    el.style.whiteSpace = 'pre-wrap'
                    el.style.maxHeight = 'none'
                    el.style.overflow = 'visible'
                    el.style.padding = '16px'
                    el.style.borderRadius = '8px'
                    el.style.backgroundColor = '#1e293b'
                }

                if (el.tagName === 'CODE' && el.parentNode.tagName !== 'PRE') {
                    el.style.backgroundColor = '#f1f5f9'
                    el.style.padding = '3px 6px'
                    el.style.borderRadius = '4px'
                    el.style.fontFamily = 'SFMono-Regular, Consolas, Monaco, monospace'
                }
            })
        },

        // 等待所有图片加载完成
        async waitForImagesLoaded() {
            return new Promise(resolve => {
                const cardEl = this.$refs.shareCardRef
                if (!cardEl) return resolve()

                const images = cardEl.querySelectorAll('img')
                if (images.length === 0) return resolve()

                let loadedCount = 0
                const totalImages = images.length

                // 设置超时，防止无限等待
                const timeout = setTimeout(() => resolve(), 5000)

                images.forEach(img => {
                    // 添加跨域属性
                    img.crossOrigin = 'Anonymous'

                    if (img.complete) {
                        loadedCount++
                        if (loadedCount === totalImages) {
                            clearTimeout(timeout)
                            setTimeout(resolve, 100) // 稍作延迟确保DOM完全渲染
                        }
                    } else {
                        img.onload = () => {
                            loadedCount++
                            if (loadedCount === totalImages) {
                                clearTimeout(timeout)
                                setTimeout(resolve, 100)
                            }
                        }

                        img.onerror = () => {
                            loadedCount++
                            // 替换为占位图
                            img.src = this.getPlaceholderImage()
                            if (loadedCount === totalImages) {
                                clearTimeout(timeout)
                                setTimeout(resolve, 100)
                            }
                        }
                    }
                })
            })
        },

        // 获取占位图片 - 改进版本，使用SVG以确保更好的质量
        getPlaceholderImage() {
            return 'data:image/svg+xml;base64,' + btoa(`
            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
                <rect width="120" height="120" fill="#F5F7FA"/>
                <rect x="30" y="30" width="60" height="40" fill="#E4E7ED"/>
                <path d="M50,50 L80,50 L65,70 Z" fill="#909399"/>
                <circle cx="45" cy="40" r="5" fill="#C0C4CC"/>
                <text x="60" y="85" text-anchor="middle" font-family="Arial" font-size="10" fill="#606266">图片加载失败</text>
            </svg>
            `.trim())
        },
        copyShareLink() {
            this.shareOptionsVisible = false; // 点击后关闭选项
            const input = document.createElement('input')
            input.value = this.shareUrl
            document.body.appendChild(input)
            input.select()
            document.execCommand('copy')
            document.body.removeChild(input)

            this.$message.success('链接已复制到剪贴板')
        },
        // 分享到微博
        shareToWeibo() {
            this.shareOptionsVisible = false; // 点击后关闭选项
            const text = `${this.formattedContent.substring(0, 100)}... - 来自 ${this.siteName}`
            const weiboUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(this.shareUrl)}&title=${encodeURIComponent(text)}`
            window.open(weiboUrl, '_blank')
        },
        // 分享到QQ
        shareToQQ() {
            this.shareOptionsVisible = false; // 点击后关闭选项
            const text = `${this.formattedContent.substring(0, 50)}... - 来自 ${this.siteName}`
            const qqUrl = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(this.shareUrl)}&title=${encodeURIComponent(this.siteName)}&desc=${encodeURIComponent(text)}`
            window.open(qqUrl, '_blank')
        },
        preloadLogo() {
            // 预加载Logo图片
            if (this.logo) {
                const img = new Image()
                img.onload = () => {
                    // Logo加载成功
                    console.log('Logo 预加载成功')
                }
                img.onerror = () => {
                    // Logo加载失败，使用备用Logo
                    console.warn('Logo 加载失败，使用备用图标')
                    this.logo = this.getBackupLogo()
                }
                img.crossOrigin = 'Anonymous' // 添加跨域设置以防止下载时出现跨域问题
                img.src = this.logo
            }
        },

        // 获取备用Logo的更好实现
        getBackupLogo() {
            // 返回一个简单的内联SVG logo
            // return 'https://pic.kingcola-icg.cn/file/1749797597269_favicon.ico'
            return 'data:image/svg+xml;base64,' + btoa(`
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
                <rect width="100" height="100" rx="20" fill="#3b82f6"/>
                <text x="50%" y="50%" font-family="Arial" font-size="40" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="middle">KB</text>
                <circle cx="70" cy="30" r="10" fill="#ffffff" fill-opacity="0.3"/>
            </svg>
            `.trim())
        },
    }
}
</script>

<style lang="scss" scoped>
.share-card-container {
    position: relative;
    display: inline-block;
}

.share-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;

    i {
        font-size: 16px;
        color: #8a8a8a;
        margin-right: 6px;
        transition: all 0.3s ease;
    }

    span {
        font-size: 14px;
        color: #606266;
    }

    &:hover {
        color: var(--primary, #409EFF);

        i {
            color: var(--primary, #409EFF);
        }
    }
}

.share-options-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    /* 定位在按钮上方 */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    /* 确保在最上层 */
    padding: 10px;
    width: 200px;
    border: 1px solid #EBEEF5;
}

.share-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.share-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
}

.share-option:hover {
    background-color: #f5f7fa;
}

.share-option i {
    margin-right: 12px;
    font-size: 18px;
    color: #606266;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

:deep(.card-dialog) {
    .el-dialog__header {
        padding: 15px 20px;
        border-bottom: 1px solid #ebeef5;
    }

    .el-dialog__body {
        padding: 20px;
    }

    // 增加对话框宽度
    width: 550px !important;
    max-width: 95vw;
}

.card-preview-container {
    .share-card {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 8px rgba(0, 0, 0, 0.06);
        margin-bottom: 24px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid rgba(235, 238, 245, 0.7);

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        .card-header {
            padding: 18px 20px;
            display: flex;
            align-items: center;
            background: linear-gradient(120deg, #4f46e5, #3b82f6);
            color: white;
            position: relative;
            overflow: hidden;

            &:before {
                content: '';
                position: absolute;
                top: -50%;
                right: -50%;
                width: 100%;
                height: 200%;
                background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
                transform: rotate(30deg);
            }

            .card-logo {
                width: 32px;
                height: 32px;
                margin-right: 14px;
                object-fit: contain;
                border-radius: 8px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
                background-color: white;
                padding: 2px;
                z-index: 2;
            }

            .card-site-name {
                font-size: 19px;
                font-weight: 700;
                letter-spacing: 0.5px;
                z-index: 2;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            }
        }

        .card-author-info {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eef2f7;
            background-color: #f8fafc;
            position: relative;

            &:after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 20px;
                right: 20px;
                height: 1px;
                background: linear-gradient(to right, transparent, #e2e8f0, transparent);
            }

            .card-avatar {
                width: 52px;
                height: 52px;
                border-radius: 12px;
                margin-right: 16px;
                object-fit: cover;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
                border: 3px solid white;
                transition: transform 0.3s ease, box-shadow 0.3s ease;

                &:hover {
                    transform: scale(1.05);
                    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
                }
            }

            .author-details {
                flex: 1;
                min-width: 0;

                .author-name {
                    font-size: 17px;
                    font-weight: 600;
                    color: #1e293b;
                    margin-bottom: 5px;
                    display: flex;
                    align-items: center;

                    &:after {
                        content: '';
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #10b981;
                        border-radius: 50%;
                        margin-left: 8px;
                    }
                }

                .time-info {
                    margin-top: 6px;

                    .post-time,
                    .update-time {
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        color: #64748b;

                        i {
                            margin-right: 5px;
                            font-size: 14px;
                        }
                    }

                    .post-time i {
                        color: #4f46e5;
                    }

                    .update-time {
                        color: #f59e0b;
                        margin-top: 4px;

                        i {
                            color: #f59e0b;
                        }
                    }
                }
            }
        }

        .card-content {
            padding: 24px;
            max-height: none; // 移除高度限制，确保内容完整显示
            background: #ffffff;
            position: relative;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 6px;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.03), transparent);
                z-index: 1;
            }

            .card-text {
                font-size: 15px;
                line-height: 1.8;
                margin-bottom: 18px;
                color: #333333;
                overflow: visible; // 确保内容不被截断
                word-break: break-word;

                // 保持和原始说说相同的样式
                &.content-render {

                    // 段落样式
                    p {
                        margin-bottom: 12px;
                        line-height: 1.8;
                    }

                    // 标题样式
                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        margin: 20px 0 12px;
                        font-weight: 600;
                        line-height: 1.4;
                        color: #222;
                    }

                    h1 {
                        font-size: 24px;
                        border-bottom: 1px solid #eee;
                        padding-bottom: 8px;
                    }

                    h2 {
                        font-size: 22px;
                    }

                    h3 {
                        font-size: 20px;
                    }

                    h4 {
                        font-size: 18px;
                    }

                    h5 {
                        font-size: 16px;
                    }

                    h6 {
                        font-size: 15px;
                    }

                    // 链接样式
                    a {
                        color: #3b82f6;
                        text-decoration: none;
                        border-bottom: 1px solid transparent;
                        transition: border-color 0.2s;

                        &:hover {
                            border-bottom: 1px solid #3b82f6;
                        }
                    }

                    // 代码样式
                    code {
                        background-color: #f1f5f9;
                        padding: 3px 6px;
                        border-radius: 4px;
                        font-family: 'SFMono-Regular', Consolas, Monaco, 'Andale Mono', monospace;
                        font-size: 14px;
                        color: #334155;
                    }

                    // 代码块样式
                    pre {
                        margin: 18px 0;
                        padding: 16px;
                        background-color: #1e293b;
                        border-radius: 8px;
                        overflow: visible !important; // 确保代码完整显示
                        position: relative;
                        max-height: none !important; // 移除高度限制
                        white-space: pre-wrap !important; // 允许代码换行

                        code {
                            background: transparent;
                            color: #e2e8f0;
                            padding: 0;
                            font-family: 'SFMono-Regular', Consolas, Monaco, 'Andale Mono', monospace;
                            font-size: 13.5px;
                            line-height: 1.6;
                            display: block;
                        }

                        &::before {
                            content: attr(data-language);
                            position: absolute;
                            top: 0;
                            right: 0;
                            padding: 4px 10px;
                            font-size: 12px;
                            background-color: rgba(0, 0, 0, 0.3);
                            color: #fff;
                            border-radius: 0 8px 0 6px;
                        }
                    }

                    // 引用样式
                    blockquote {
                        border-left: 4px solid #3b82f6;
                        padding: 12px 18px;
                        margin: 15px 0;
                        background-color: #f8fafc;
                        color: #475569;
                        font-style: italic;
                        border-radius: 0 6px 6px 0;
                    }

                    // 列表样式
                    ul,
                    ol {
                        padding-left: 22px;
                        margin: 12px 0;
                    }

                    li {
                        margin-bottom: 6px;
                        margin-left: 22px; // 确保列表项不会太靠左
                    }

                    // 表格样式
                    table {
                        border-collapse: collapse;
                        width: 100%;
                        margin: 15px 0;
                        overflow-x: auto;
                        display: block; // 确保表格可滚动
                        border-radius: 6px;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

                        th,
                        td {
                            border: 1px solid #e2e8f0;
                            padding: 10px;
                            text-align: left;
                        }

                        th {
                            background-color: #f8fafc;
                            font-weight: 600;
                        }

                        tr:nth-child(even) {
                            background-color: #f9fafb;
                        }
                    }
                }
            }

            .card-images {
                margin-top: 15px;
                display: grid;
                gap: 10px;
                grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
                max-width: 95%; // 控制整个图片区域的宽度
                margin-left: auto;
                margin-right: auto;

                // 根据图片数量调整布局
                &:has(> .card-image-container:nth-child(1)) {
                    grid-template-columns: 1fr;
                    max-width: 70%; // 单张图片时限制最大宽度
                    margin: 0 auto;
                }

                &:has(> .card-image-container:nth-child(2)) {
                    grid-template-columns: repeat(2, 1fr);
                    max-width: 80%;
                    margin: 0 auto;
                }

                &:has(> .card-image-container:nth-child(3)),
                &:has(> .card-image-container:nth-child(4)) {
                    grid-template-columns: repeat(2, 1fr);
                    max-width: 85%;
                    margin: 0 auto;
                }

                &:has(> .card-image-container:nth-child(5)),
                &:has(> .card-image-container:nth-child(6)) {
                    grid-template-columns: repeat(3, 1fr);
                    max-width: 90%;
                    margin: 0 auto;
                }

                .card-image-container {
                    position: relative;
                    overflow: hidden;
                    padding-top: 65%; // 更适合内容展示的宽高比，更扁平
                    border-radius: 10px;
                    background-color: #f5f5f5;
                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
                    transition: all 0.3s ease;

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
                    }

                    .card-image {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: contain; // 改为 contain 确保完整显示图片内容
                        border-radius: 10px;
                        background-color: #fafafa; // 增加背景色以便于展示透明图片
                    }
                }
            }
        }

        .card-footer {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #eef2f7;
            background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
            position: relative;

            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 20px;
                right: 20px;
                height: 1px;
                background: linear-gradient(to right, transparent, #e2e8f0, transparent);
            }

            .card-meta {
                position: relative;
                padding-left: 10px;

                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 5px;
                    bottom: 5px;
                    width: 3px;
                    background: linear-gradient(to bottom, #4f46e5, #3b82f6);
                    border-radius: 3px;
                }

                .meta-item {
                    display: flex;
                    align-items: center;
                    color: #64748b;
                    font-size: 13px;
                    margin-bottom: 8px;

                    i {
                        margin-right: 7px;
                        font-size: 15px;
                    }

                    &.share-time {
                        color: #475569;
                        font-style: italic;
                        font-weight: 500;
                    }
                }
            }

            .card-qrcode {
                width: 110px;
                height: 110px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 8px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05);
                border: 1px solid #e2e8f0;
                position: relative;
                overflow: hidden;

                &:before {
                    content: '';
                    position: absolute;
                    top: -10px;
                    left: -10px;
                    width: 40px;
                    height: 40px;
                    background: rgba(79, 70, 229, 0.1);
                    border-radius: 50%;
                }

                &:after {
                    content: '';
                    position: absolute;
                    bottom: -10px;
                    right: -10px;
                    width: 40px;
                    height: 40px;
                    background: rgba(59, 130, 246, 0.1);
                    border-radius: 50%;
                }

                canvas,
                img {
                    max-width: 100%;
                    max-height: 100%;
                    border-radius: 6px;
                    z-index: 2;
                }
            }
        }
    }

    .card-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 10px;
    }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
    .share-options .share-option {
        background-color: #1e1e20;

        &:hover {
            background-color: #2a2a2d;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        i {
            color: #60a5fa;
        }
    }

    .share-card {
        background: #0f172a !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        border-color: #334155 !important;

        .card-header {
            background: linear-gradient(120deg, #4338ca, #1d4ed8) !important;

            &:before {
                background: linear-gradient(rgba(255, 255, 255, 0.05), transparent) !important;
            }

            .card-logo {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
                background-color: #1e293b !important;
            }

            .card-site-name {
                color: #f8fafc !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
            }
        }

        .card-content {
            background: #0f172a !important;

            &:before {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent) !important;
            }
        }

        .card-content .card-text {
            color: #e2e8f0 !important;

            &.content-render {

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: #f3f4f6 !important;
                }

                a {
                    color: #60a5fa !important;

                    &:hover {
                        border-bottom-color: #60a5fa !important;
                    }
                }

                code {
                    background-color: #1e293b !important;
                    color: #e2e8f0 !important;
                }

                pre {
                    background-color: #0f172a !important;

                    code {
                        color: #f3f4f6 !important;
                    }
                }

                blockquote {
                    background-color: #1e293b !important;
                    border-left-color: #60a5fa !important;
                    color: #cbd5e1 !important;
                }

                table th {
                    background-color: #1e293b !important;
                }

                table td,
                table th {
                    border-color: #334155 !important;
                }

                table tr:nth-child(even) {
                    background-color: #1e1e20 !important;
                }
            }
        }

        .card-author-info {
            border-bottom-color: transparent !important;
            background-color: #1e293b !important;

            &:after {
                background: linear-gradient(to right, transparent, #4b5563, transparent) !important;
            }

            .author-name {
                color: #f8fafc !important;

                &:after {
                    background-color: #059669 !important;
                }
            }

            .card-avatar {
                border-color: #1e293b !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
            }
        }

        .card-footer {
            background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
            border-top-color: transparent !important;

            &:before {
                background: linear-gradient(to right, transparent, #4b5563, transparent) !important;
            }

            .card-meta {
                &:before {
                    background: linear-gradient(to bottom, #4338ca, #60a5fa) !important;
                }

                .meta-item {
                    color: #94a3b8 !important;

                    i {
                        color: #60a5fa !important;
                    }

                    &.share-time {
                        color: #cbd5e1 !important;
                    }
                }
            }

            .card-qrcode {
                background-color: #1e293b !important;
                border-color: #374151 !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;

                &:before,
                &:after {
                    background-color: rgba(79, 70, 229, 0.15) !important;
                }
            }
        }

        .card-images .card-image-container {
            background-color: #1e293b !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

            .card-image {
                background-color: #0f172a !important;
            }

            &:hover {
                transform: translateY(-3px) !important;
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4) !important;
            }
        }
    }
}

/* 自定义暗黑模式类 */
.dark-mode {
    .share-options .share-option {
        background-color: #1e1e20;

        &:hover {
            background-color: #2a2a2d;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }

        i {
            color: #60a5fa;
        }
    }

    .share-card {
        background: #0f172a;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        border-color: #334155;

        .card-header {
            background: linear-gradient(120deg, #4338ca, #1d4ed8);

            &:before {
                background: linear-gradient(rgba(255, 255, 255, 0.05), transparent);
            }

            .card-logo {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                background-color: #1e293b;
            }

            .card-site-name {
                color: #f8fafc;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }
        }

        .card-content {
            background: #0f172a;

            &:before {
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), transparent);
            }
        }

        .card-content .card-text {
            color: #e2e8f0;

            &.content-render {

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: #f3f4f6;
                }

                a {
                    color: #60a5fa;

                    &:hover {
                        border-bottom-color: #60a5fa;
                    }
                }

                code {
                    background-color: #1e293b;
                    color: #e2e8f0;
                }

                pre {
                    background-color: #0f172a;

                    code {
                        color: #f3f4f6;
                    }
                }

                blockquote {
                    background-color: #1e293b;
                    border-left-color: #60a5fa;
                    color: #cbd5e1;
                }

                table th {
                    background-color: #1e293b;
                }

                table td,
                table th {
                    border-color: #334155;
                }

                table tr:nth-child(even) {
                    background-color: #1e1e20;
                }
            }
        }

        .card-author-info {
            border-bottom-color: transparent;
            background-color: #1e293b;

            &:after {
                background: linear-gradient(to right, transparent, #4b5563, transparent);
            }

            .author-name {
                color: #f8fafc;

                &:after {
                    background-color: #059669;
                }
            }

            .card-avatar {
                border-color: #1e293b;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            }
        }

        .card-footer {
            background: linear-gradient(to bottom, #1e293b, #0f172a);
            border-top-color: transparent;

            &:before {
                background: linear-gradient(to right, transparent, #4b5563, transparent);
            }

            .card-meta {
                &:before {
                    background: linear-gradient(to bottom, #4338ca, #60a5fa);
                }

                .meta-item {
                    color: #94a3b8;

                    i {
                        color: #60a5fa;
                    }

                    &.share-time {
                        color: #cbd5e1;
                    }
                }
            }

            .card-qrcode {
                background-color: #1e293b;
                border-color: #374151;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

                &:before,
                &:after {
                    background-color: rgba(79, 70, 229, 0.15);
                }
            }
        }

        .card-images .card-image-container {
            background-color: #1e293b;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

            .card-image {
                background-color: #0f172a;
            }

            &:hover {
                transform: translateY(-3px);
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
            }
        }

        .card-images .card-image-container {
            background-color: #27272a;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        }
    }
}

/* 水印相关样式 */
.card-watermark-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: multiply;
    /* 使水印与背景更好地融合 */
}

/* 水印元素样式 */
.card-watermark {
    position: absolute;
    transform-origin: center center;
    will-change: transform;
    /* 优化渲染性能 */
}

/* 确保暗色模式下水印更清晰 */
.dark-mode .card-watermark-container,
:root[data-theme="dark"] .card-watermark-container {
    mix-blend-mode: screen;
    /* 在暗色模式下使用不同的混合模式 */
}

/* 导出效果样式 */
.with-export-effects {
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* 装饰角样式 */
.card-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 20;
}

.corner-top-left {
    top: 5px;
    left: 5px;
    border-top: 2px solid #3b82f6;
    border-left: 2px solid #3b82f6;
    border-top-left-radius: 6px;
}

.corner-top-right {
    top: 5px;
    right: 5px;
    border-top: 2px solid #3b82f6;
    border-right: 2px solid #3b82f6;
    border-top-right-radius: 6px;
}

.corner-bottom-left {
    bottom: 5px;
    left: 5px;
    border-bottom: 2px solid #3b82f6;
    border-left: 2px solid #3b82f6;
    border-bottom-left-radius: 6px;
}

.corner-bottom-right {
    bottom: 5px;
    right: 5px;
    border-bottom: 2px solid #3b82f6;
    border-right: 2px solid #3b82f6;
    border-bottom-right-radius: 6px;
}
</style>

<style>
/* 移除分享卡片预览弹窗的遮罩层背景 */
.share-card-modal {
    background: transparent;
}
</style>
